<!-- 饼型图 -->
<!-- <template>
    <div class="banxin">
         <div id="myChart" style="min-height: 600px;" ref="myEchart"></div>
    </div>   
</template>
<script> 
    export default {
        data () { 
            return {
                
            }
        },
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {
              //基于准备好的dom，初始化echarts实例
              var myChart = this.$echarts.init(document.getElementById('myChart'));
              myChart.setOption({
              //设置饼型图颜色
              backgroundColor: '#4bc28c',
              series : [
                  {
                      //饼型图也可以通过  roseType: 'angle'设置成南格丁尔图
                      //roseType: 'angle',
                      name: '访问来源',
                      type: 'pie',
                      radius: '55%',
                      data:[
                          {value:235, name:'视频广告'},
                          {value:274, name:'联盟广告'},
                          {value:310, name:'邮件营销'},
                          {value:335, name:'直接访问'},
                          //自定义每个扇面的颜色
                          {
                            value:335, name:'直接访问',
                            itemStyle:{
                            color:'green'
                            }
                          } 
                      ],
                      label: {
                          normal: {
                              textStyle: {
                                  color: 'rgba(255, 255, 255, 1)'
                              }
                          }
                      },
                      //表格中文字与饼图线的颜色
                      labelLine: {
                          normal: {
                              lineStyle: {
                                  color: 'rgba(255, 255, 255, 1)'
                              }
                          }
                      }
                  }
                ]
              })
            }
        }
    }
</script> -->

<!-- 南丁格尔图 -->
<template>
       <div class="banxin">
            <div id="nandingge" style="width:400px; height:400px;" ref="myEchart"></div>
       </div>
</template>
<script> 
    export default {
        data () { 
            return {
                
            }
        }, 
        //mounted是勾子函数
        mounted() {
            this.initChart();
        },
        methods: {
            initChart() {
              //基于准备好的dom，初始化echarts实例
              var nandingge = this.$echarts.init(document.getElementById('nandingge'));
              nandingge.setOption({
                backgroundColor: '#4bc28c',
                //视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素。
                visualMap: {
                    show: true,
                     // 映射的最小值为 80
                    min: 80,
                    max: 600,
                    inRange: {
                        // 视觉组件，明暗度的范围是 0 到 1
                        colorLightness: [0, 1]
                    }
                },
               series : [
                  {
                      name: '访问来源',
                      //饼图：pie  (南丁格尔图：在series中加上roseType:’angle’)
                      type: 'pie',
                      roseType: 'angle',
                      //南丁格尔图
                      radius: '50%',

                      data:[
                          {value:235, name:'视频广告'},
                          {value:274, name:'联盟广告'},
                          {value:310, name:'邮件营销'},
                          {
                            value:335, name:'直接访问',
                            itemStyle:{
                              color:'blue'
                            }
                          },
                          //设置每个扇面的颜色
                          {
                            //value是扇型占比多大
                            value:400, name:'搜索引擎',
                            itemStyle:{
                              color:'green'
                            }
                          }
                      ],                    
                      //表格中文字的颜色
                      label: {
                          normal: {
                              textStyle: {
                                  color: 'rgba(255, 255, 255, 1)'
                              }
                          }
                      },
                      //表格中文字与饼图线的颜色
                      labelLine: {
                          normal: {
                              lineStyle: {
                                  color: 'rgba(255, 255, 255, 1)'
                              }
                          }
                      },
                      //扇型的设置
                      itemStyle: {
                          normal: {
                              color: '#c23531',
                              // 阴影大小
                              shadowBlur: 200,
                              // 阴影颜色
                              shadowColor: 'rgba(0, 0, 0, 1)'
                          }
                      }
                  }
                ]
              })
            }
        }
    }
</script>
<style type="text/css">
     #nandingge{
        float: left;
     }
</style>
<!-- 条型图 -->
<!-- 注册组件 -->
<!-- <template>
    <div class="banxin">
       <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
    </div>  
</template>
 
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            //条型右上角显示
            legend: {
                data:['销量'],
                left:210,
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>

